<template>
	<view class="demo">
		<u-navbar title='销售订单' left-icon=" " bgColor="transparent" titleStyle="color:#333"
			:placeholder="true"></u-navbar>
		<image src="http://qiniuapplet.jiachuangnet.com/pageHeader.png"
			style="width: 100%;height:494rpx;position: absolute;top:0;left:0;z-index: 10"></image>
		<view style="position: absolute;width:700rpx;left:25rpx;top:160rpx;z-index: 10;">
			<u-tabs :lineColor='color' :activeStyle="{'fontSize':'32rpx','color':color,'fontWeight':'700'}"
				:inactiveStyle="{'fontSize':'26rpx'}" :list="warehouseList" @click="click" :scrollable='true'
				style="position: sticky;top:100rpx"></u-tabs>
			<view style="background:white;border-radius: 40rpx;margin:20rpx 0;padding:10rpx 30rpx;">
				<uni-data-select  v-model="orderType" :localdata="Range" @change="change"></uni-data-select>
			</view>
			<view style="background:white;border-radius: 40rpx;margin:20rpx 0;padding:10rpx 20rpx;">
				<u--input v-model='storeName' @change="deChange" placeholder="请输入门店名称" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399"></u--input>
			</view>
			<!-- 	<view class="flex border radius" style="width: 700rpx;margin: 20rpx auto;background-color: white;">
			<u--input v-model='storeName' style="width: calc(100%  -100rpx )" placeholder="请输入门店名称" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399"></u--input>
			<view style="width: 100rpx;">
				<u-button type="primary" @click="getOrderList()">查询</u-button>
			</view>
		</view> -->
			<view class="content">
				<view v-for="(v,i) in orderList" :key="i" class="item" @click="toPath(v)">
					<view class="flex"
						style="justify-content:space-between;border-bottom:1rpx solid #eee;padding-bottom:20rpx">
						<view class="flex" style='width:calc(100% - 60rpx);justify-content: flex-start;'>
							<view class="val" style="font-size: 32rpx;font-weight: 700;max-width: 95%;">{{v.storeName}}</view>
							<!-- <view style='margin-left:20rpx'>
							<u-tag plainFill plain :text='v.areaName' size="mini"></u-tag>
						</view> -->
						</view>
						<view class="flex" style="widht:50rpx">
							<u-icon name="arrow-right" color='#666'></u-icon>
						</view>
					</view>
					<view class="flex" style="margin:20rpx 0;">
						<view class="label">姓名</view>
						<view class="val">{{v.customPhone.split('-')[0]}}</view>
					</view>
					<view class="flex" style="margin-bottom:20rpx;">
						<view class="label">电话</view>
						<view class="val">{{v.customPhone.split('-')[1]}}</view>
					</view>
					<view class="flex">
						<view class="label">地址</view>
						<view class="val over">{{v.address}}</view>
					</view>
					<view class="flex"
						style="justify-content: space-between;padding-top:20rpx;border-top:1rpx solid #eee;margin-top:20rpx">
						<view class="flex">
							<view style="font-size: 24rpx;">{{v.deliveryDate}}</view>
						</view>
						<view class="flex" v-if="userName =='admin'">
							<view :style="{'color':color}">{{v.totalAmount}}元</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view @click="openCalendar"
			style="width:120rpx;height:120rpx;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);position: fixed;bottom:50rpx;right:50rpx;z-index:100000;border-radius: 50%;background: #50a1f5;">
			<view style="display:flex;justify-content:center;margin-top: 25rpx;margin-bottom:5rpx;">
				<u-icon name="calendar" color="white" size="20"></u-icon>
			</view>
			<view style="text-align: center;font-size: 24rpx;color:white">日期</view>
		</view>
		<view>
			<u-popup :show="calendarDialog" @close="close" mode="top" :safeAreaInsetTop="true">
				<!-- <view
					style="display: flex;align-items: center;justify-content: space-around;border: #50a1f5 1px solid;margin: 20px;">
					<view class="left" @click="calendarShow=true">
						{{startTime}}
					</view>
					-
					<view class="right" @click="calendarShow2=true">
						{{endTime}}
					</view>
					<view v-if="startTime!=='开始时间'" @click="clear" style="font-size: 12px; color: #50a1f5;">清除</view>
				</view>
				<u-button type="primary" size="small">搜索</u-button> -->
				<view style="height: 400rpx;">
					<view class="timeConner">
						<view @click="calendarShow=true">{{startTime || '开始时间'}}</view>
						<view>至</view>
						<view @click="calendarClick">{{endTime || '结束时间'}}</view>
					</view>
					<view class="bottom flex" style="display: flex;justify-content: space-between; align-items: ;" >
						<u-button size="small" style="width: 140rpx;" @click="calendarDialog=false">取消</u-button>
						<u-button size="small" style="width: 140rpx;" @click="allTime">全部时间</u-button>
						<u-button size="small" type="primary" style="width: 140rpx;" @click="change">确认</u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<u-datetime-picker ref="datetimePicker" :show="calendarShow" cancelText=' ' v-model="value1" mode="date" @confirm="chooseTime1"
			@close="calendarShow=false"></u-datetime-picker>
		<u-datetime-picker ref="datetimePicker"  cancelText=' ' :show="calendarShow2" v-model="value2" mode="date"
			@confirm="chooseTime2"></u-datetime-picker>
	</view>
</template>
<script>
	let app = getApp();
	export default {
		data() {
			return {
				color: app.globalData.defaultColor,
				calendarDialog: false,
				warehouseList: [],
				areaId: null,
				pageSize: 20,
				pageNumber: 1,
				Range:[
					{
						value: 2,
						text: "老店"
					},
					{
						value: 1,
						text: "新店"
					}
				],
				mode: "range",
				calendarShow: false,
				calendarShow2: false,
				orderType:1,
				value1: new Date().toISOString().split('T')[0],
				value2: new Date().toISOString().split('T')[0],
				storeName: '',
				startTime: "",
				endTime: "",
				orderList: [],
				userName: ''
			}
		},
		onLoad() {
			this.userName = uni.getStorageSync('userName');
			this.getAreaList();
		},
		onHide(){
			// this.orderList = [];
		},
		onReachBottom() {
			this.pageNumber++;
			this.getOrderList();
		},
		methods: {
			deChange(){
				uni.$u.debounce(this.change, 1000)
			},
			change(){
				this.orderList= [];
				this.pageNumber=1;
				console.log(1)
				this.getOrderList();
			},
			clear() {
				this.startTime = ""
				this.endTime = ""
			},
			calendarClick(){
				if(this.startTime){
					this.calendarShow2=true
				}else{
				 uni.$u.toast('请选择开始时间!');
				}
			},
			chooseTime1(e) {
				const date = new Date(e.value)
				this.startTime =
					`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
				this.calendarShow = false
			},
			chooseTime2(e) {
				const date = new Date(e.value)
				this.endTime =
					`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
				this.calendarShow2 = false
			},
			click(e) {
				this.orderList = [];
				this.pageNumber = 1;
				this.areaId = e.id;
				this.getOrderList();
			},
			getOrderList(type) {
				this.calendarDialog = false;
				let params = {
					pageSize: this.pageSize,
					pageNumber: this.pageNumber,
					areaId: this.areaId,
					storeName: this.storeName,
					orderBy: 1,
					startTime:this.startTime,
					endTime:this.endTime,
					orderType:this.orderType
				}
				uni.$u.http.post('/order/orderList', params).then(res => {
					this.orderList = this.orderList.concat(res.data)
				})
			},
			toPath(v) {
				uni.navigateTo({
					url: '/pages/orderDetails/index?order=' + JSON.stringify(v)
				})
			},
			getAreaList() {
				let params = {
					pageSize: 1000000000,
					pageNumber: 1
				}

				uni.$u.http.get('/areaLedger/areaList', {
					params: params
				}).then(res => {
					if(res){
					res.map(el => {
						el.id = el.area;
						el.name = el.areaName;
						if (el.name === '武汉') {
							el.badge = {
								isDot: true
							}
						}
					})
					this.warehouseList = res;
					this.areaId = this.warehouseList[0].id;
					this.getOrderList();
					}
				})
			},
			openCalendar() {
				this.calendarDialog = true
			},
			close() {
				this.calendarDialog = false
			},
			confirm(e) {
				console.log(e)
			},
			chooseDate() {
				let params = {
					pageSize: this.pageSize,
					pageNumber: this.pageNumber,
					areaId: this.areaId,
					storeName: this.storeName,
					orderBy: 1,
					startTime:this.startTime,
					endTime:this.endTime
				}
				uni.$u.http.post('/order/orderList', params).then(res => {
					this.orderList = res.data
					this.calendarDialog = false
				})
			},
			allTime() {
				this.startTime = ""
				this.endTime = ""
				this.chooseDate()
			}

		}
	}
</script>
<style>
page{
background:#f8f8f8;
}
</style>
<style lang="scss" scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.border {

		border: 1rpx solid #eee;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.content {
		width: 700rpx;
		margin: 0 auto;
	}

	.item {
		width: 660rpx;
		padding: 20rpx;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.label {
		color: #999;
		width: 180rpx;
		font-size: 28rpx;
		font-weight: 400;
	}

	.val {
		color: #333;
		font-size: 28rpx;
		max-width: 70%;
	}

	.over {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}

	.timeConner {
		display: flex;
		background: #50a1f5;
		height: 80rpx;
		border-radius: 50rpx;
		margin-left: 50rpx;
		margin-top: 150rpx;
		margin-right: 50rpx;
		justify-content: space-evenly;
		color: #fff;
		align-items: center;
		border: 10rpx solid #87CEFA;
	}

	.bottom {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
		padding-left: 120rpx;
		padding-right: 120rpx;
	}
	.demo ::v-deep .uni-select{
		border: none;
	}
</style>